<template>
  <div style="padding:10px">
    <el-button v-print="'#print'" size="mini" type="success">打印</el-button>
    <el-button size="mini" type="info" @click="back">返回</el-button>
    <div id="print">
      <h1 style="">{{ name2 }}</h1>
      <p class="font">客户订单</p>
      <div v-if="identical==1" class="case">
        <div>
          <!-- <p>传真:</p>
          <p>地址:</p> -->
          <p>客户名称:{{ name }}</p>
        </div>
        <div>
          <!-- <p>下单日期：{{ orderDate }} </p>
          <p>交货日期：{{ deliveryDate }}</p> -->
        </div>
      </div>
      <table>
        <tr>
          <td v-if="identical!==1" style="width:1100px">客户名称</td>
          <td>任务编号</td>
          <td style="width:450px">客户单号</td>
          <td style="width:200px">款号</td>
          <td style="width:400px">箱型</td>
          <td style="width:400px">材质</td>
          <td style="width:550px">纸箱尺寸(mm)</td>
          <td style="width:450px">订单数量</td>
          <td>金额</td>
          <td style="width:400px">下单日期</td>
          <td style="width:400px">交货日期</td>
        </tr>
        <tr v-for="item in tableData" :key="item.id">
          <td v-if="identical!==1">{{ item.name }}</td>
          <td>{{ item.no }}</td>
          <td>{{ item.customerNo }}</td>
          <td>{{ item.modelNo }}</td>
          <td>{{ item.boxType }}</td>
          <td>{{ item.material }}</td>
          <td>{{ item.length }}*{{ item.width }}*{{ item.height }}</td>
          <td>{{ item.orderNum }}</td>
          <td>{{ item.money }}</td>
          <td>{{ item.orderDate }}</td>
          <td>{{ item.deliveryDate }}</td>
        </tr>
      </table>
      <!-- <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 75%"
        border
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="no" label="任务编号" width="80" />
        <el-table-column prop="name" label="客户名称" width="80" />
        <el-table-column prop="customerNo" label="客户单号" width="80" />
        <el-table-column prop="modelNo" label="款号" width="50" />
        <el-table-column prop="boxType" label="箱型" width="50" />
        <el-table-column prop="material" label="材质" width="50" />
        <el-table-column prop="cartonSize" label="纸箱尺寸(mm)" width="120">
          <template slot-scope="scope">
            {{ scope.row.length+' X '+scope.row.+' X '+scope.row.height }}
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="订单数量" width="100" />
        <el-table-column prop="money" label="金额" />
        <el-table-column prop="incomeNum" label="纸板到货数量" width="120" />
        <el-table-column prop="space" label="仓位" width="120" />
        <el-table-column prop="productNum" label="已产数量" width="80" />
        <el-table-column prop="productSpace" label="成品仓位" width="80" />
        <el-table-column prop="sendNum" label="已送数量" width="80" />
        <el-table-column prop="refundNum" label="退货数量" width="120" />
        <el-table-column prop="lossNum" label="损耗数量" width="120" />
        <el-table-column prop="orderDate" label="下单日期" width="80" />
        <el-table-column prop="deliveryDate" label="交货日期" width="80" />
        <el-table-column prop="wosState" label="仓库状态" width="80" />
        <el-table-column prop="money" label="金额" width="120" />
        <el-table-column prop="supplier" label="供方" width="120" />
        <el-table-column prop="createdTime" label="制单时间" width="120" />
        <el-table-column prop="making" label="制单人" width="120" />
        <el-table-column prop="auditTime" label="审核时间" width="120" />
        <el-table-column prop="audit" label="审核人" width="120" />
      </el-table>
      <el-pagination
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </div>
  </div>
</template>

<script>
// import { export2Excel } from '@/utils/common'
import { list } from '@/api/basedata/firm'
export default {
  name: 'Edit',
  data() {
    return {
      id: '测试施工单id',
      total: 0,
      form: {
        page: 1,
        count: 10
        // no: '',
        // modelNo: '',
        // boxType: '',
        // supplier: ''
      },
      tableData: [],
      value: '',
      options: [],
      boxTypeOptions: [],
      supplierOptions: [],
      name2: '',
      no: '',
      name: '',
      orderDate: '',
      deliveryDate: '',
      identical: '',
      tempArray: [],
      different: ''
    }
  },
  created() {
    list().then(res => {
      // console.log(res)
      var firmList = []
      firmList = res.list
      firmList.forEach(a => {
        if (a.isFirm === true) {
          this.name2 = a.name
        }
      })
    })
    var list2 = []
    var object = this.$route.query
    for (const key in object) {
      if (object.hasOwnProperty(key)) {
        const element = object[key]
        list2.push(element)
      }
    }
    this.tableData = list2
    // this.tableData.forEach(x => {
    //   this.no = x.no
    //   this.customerNo = x.customerNo
    //   this.orderDate = x.orderDate
    //   this.deliveryDate = x.deliveryDate
    //   console.log(this.customerNo)
    // })
    this.no = this.tableData[0].no
    this.name = this.tableData[0].name
    this.orderDate = this.tableData[0].orderDate
    this.deliveryDate = this.tableData[0].deliveryDate
    // console.log('aa', this.tableData)
    for (var i = 0; i < this.tempArray.map(x => x.name).length; i++) {
      for (var j = i + 1; j < this.tempArray.map(x => x.name).length; j++) {
        if (this.tempArray.map(x => x.name)[i] !== this.tempArray.map(x => x.name)[j]) {
          this.identical = 2
          this.different = 2
        } else {
          this.identical = 1
        }
      }
    }
    if (this.different === 2) {
      this.identical = 2
    }
    if (this.tableData.length === 1) {
      this.identical = 1
    }
    if (this.tableData[0].b === 1) {
      this.identical = 1
    }
  },
  methods: {
    back() {
      this.$router.push('/edit')
    }

    // toExcel() {
    //   var list = this.tableData
    //   const th = ['部门名称', '最后操作时间']
    //   const filterVal = ['name', 'lastmodifytime']
    //   const data = list.map(v => filterVal.map(k => v[k]))
    //   export2Excel(th, data, '部门管理')
    // }
  }

}
</script>

<style scoped>
.el-link{
  color: rgb(0, 162, 255);
  font: 1em sans-serif;
}
.font{
  font-weight: bold;
  width: 1050px;
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
  line-height: 100px;
  font-size: 30px;
  font-family: 'Courier New', Courier, monospace;
  /* text-align: center; */
  /* margin-left: 40%; */
  margin-bottom: 0%;
}
h1{
  /* margin-left: 40%; */
  width: 1050px;
  margin: 0 auto;
text-align: center;
  font-weight: normal;
  margin-bottom: 0%;
  height: 0px;
}
table,tr,td{
  border:1px solid black;
}
table{
  width:1050px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;

}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 150px;
  text-align: center ;
  padding-left:15px;

}
.case{
  display: flex;
  justify-content: space-between;
  width: 1050px;
  margin: 0 auto;
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
